/**
 * a customizable Navbar
 */
import React from 'react';
import {
  View,
  Text,
  Image,
  Dimensions,
  StatusBar,
  Platform,
  Animated,
  TouchableNativeFeedback,
  StyleSheet,
} from 'react-native';
import { Icon } from 'react-native-elements';
import PropTypes from 'prop-types';

const Navbar = ({
  backgroundColor,
  navHeight,
  title,
  titleColor,
  subTitle,
  titlePos,
  leftOnPress,
  rightOnPress,
  leftIcon,
  rightIcon,
  customizeNavbar,
  img,
  showStatus,
  style,
  navbarAnimated,
  leftText,
  leftTextColor,
  leftTextSize,
  rightText,
  rightTextColor,
  rightTextSize,
  backOverlayColor,
}) => {
  let Component = img ? Image : View;
  Component = navbarAnimated ? Animated.View : Component;

  const imgProps = {
    source: {
      uri: img,
    },
  };

  const statusHeight = Platform.select({
    android: StatusBar.currentHeight,
    ios: 20,
  });

  return (
    <Component
      {...img ? imgProps : {}}
      style={[
        {
          backgroundColor,
          height: showStatus ? (navHeight + statusHeight) : navHeight,
          width: Dimensions.get('window').width,
        },
        style,
      ]}>
      <View style={[styles.backOverlay, { backgroundColor: backOverlayColor }]} />
      {showStatus && <View style={{ height: statusHeight, backgroundColor: 'rgba(0,0,0,0)' }} /> }
      <View style={[
        { height: navHeight, backgroundColor },
        img && { backgroundColor: 'transparent' },
      ]}>
        { customizeNavbar
          ? customizeNavbar
          :
          <View style={[
            styles.barContentWrapper,
            { justifyContent: (!leftIcon && !rightIcon) ? 'center' : 'space-between' },
            { paddingLeft: leftText.length ? 8 : 0 },
            { paddingRight: rightText.length ? 8 : 0 },
          ]}>
            {/* left area */}
            { leftIcon ?
              <TouchableNativeFeedback
                onPress={leftOnPress}
                background={TouchableNativeFeedback.Ripple('rgba(0,0,0,.3)', true)}>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    minWidth: navHeight,
                    height: navHeight,
                    borderRadius: navHeight / 2,
                    overflow: 'visible',
                  }}>
                  <Icon size={28} {...leftIcon} />
                  {leftText.length !== 0
                    ? <Text style={{ color: leftTextColor, fontSize: leftTextSize, marginLeft: 4 }}>{leftText}</Text>
                    : null
                  }
                </View>
              </TouchableNativeFeedback>
              :
              <View style={{ width: navHeight, height: navHeight }} />
            }
            {/* center ttile area */}
            <View
              style={{
                flex: 1,
                alignItems: titlePos === 'left' ? 'flex-start' : titlePos === 'center' ? 'center' : 'flex-end',
              }}>
              {typeof (title) === 'object'
                ? title
                : <Text numberOfLines={1} style={{ color: titleColor, fontSize: 19 }}>{title}</Text>
              }
              {Boolean(subTitle) && ((typeof subTitle === 'string') ? <Text numberOfLines={1} style={{ color: titleColor, fontSize: 13 }}>{subTitle}</Text> : subTitle)}
            </View>
            {/* right area */}
            { rightIcon ?
              <TouchableNativeFeedback
                onPress={rightOnPress}
                background={TouchableNativeFeedback.Ripple('rgba(0,0,0,.3)', true)}>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    minWidth: navHeight,
                    height: navHeight,
                    borderRadius: navHeight / 2,
                  }}>
                  {rightText.length !== 0
                    ? <Text style={{ color: rightTextColor, fontSize: rightTextSize, marginLeft: 4 }}>{rightText}</Text>
                    : null
                  }
                  <Icon size={28} {...rightIcon} />
                </View>
              </TouchableNativeFeedback>
              :
              <View style={{ width: navHeight, height: navHeight }} />
            }
          </View>
        }
      </View>
    </Component>
  );
};

const styles = StyleSheet.create({
  backOverlay: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },

  barContentWrapper: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
});

Navbar.propTypes = {
  backgroundColor: PropTypes.string, // 导航的背景颜色
  navHeight: PropTypes.number, // 导航栏高度
  title: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]), // 导航标题
  subTitle: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]), // 导航子标题
  titlePos: PropTypes.oneOf(['left', 'center', 'right']), // 导航的位置
  leftOnPress: PropTypes.func, // 点击左边的额图标
  rightOnPress: PropTypes.func, // 点击右边的图标
  leftIcon: PropTypes.object,
  rightIcon: PropTypes.object,
  img: PropTypes.string,
  customizeNavbar: PropTypes.element,
  titleColor: PropTypes.string,
  showStatus: PropTypes.bool,
  style: PropTypes.object, // 自己定制wapper导航条
  navbarAnimated: PropTypes.bool, // 导航条是否是Animated.View
  leftText: PropTypes.string, // left text
  rightText: PropTypes.string, // right text
  leftTextColor: PropTypes.string, // left text color
  rightTextColor: PropTypes.string, // right text color
  leftTextSize: PropTypes.number, // left text size
  rightTextSize: PropTypes.number, // right text size
  backOverlayColor: PropTypes.string, // navbar overlay color
};

Navbar.defaultProps = {
  backgroundColor: '#108eeb', // 导航的背景颜色
  navHeight: 56, // 导航栏高度
  title: '', // 导航标题
  subTitle: '', // 导航子标题
  titlePos: 'left', // 导航的位置
  leftOnPress: () => {}, // 点击左边的的图标
  rightOnPress: () => {}, // 点击右边的图标
  leftIcon: null, // 左边的的图标
  rightIcon: null, // 右边的图标
  img: '', // 是否是带图片的背景
  customizeNavbar: null, // 自己定制
  titleColor: '#000', // 标题的颜色
  showStatus: true, // 是否显示状态栏
  style: {}, // 自己定制wapper导航条
  navbarAnimated: false, // 导航条是否是Animated.View
  leftText: '', // left text
  rightText: '', // right text
  leftTextColor: '#000', // left text color
  rightTextColor: '#000', // right text color
  leftTextSize: 16, // left text size
  rightTextSize: 16, // right text size
  backOverlayColor: 'rgba(0,0,0,.2)', // navbar overlay color
};
// iconSize  28

export default Navbar;
